<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title">icon图标</view>
		</view>
		<view class="icon-list">
			<view class="icon-item">
				<icon type="success" color="green"/>
				<text>success</text>
			</view>
			<view class="icon-item">
				<icon type="success_no_circle" color="green"/>
				<text>success_no_circle</text>
			</view>
			<view class="icon-item">
				<icon type="info" />
				<text>info</text>
			</view>
			<view class="icon-item">
				<icon type="warn" />
				<text>warn</text>
			</view>
			<view class="icon-item">
				<icon type="waiting" />
				<text>waiting</text>
			</view>
			<view class="icon-item">
				<icon type="cancel" />
				<text>cancel</text>
			</view>
			<view class="icon-item">
				<icon type="download" color="green"/>
				<text>download</text>
			</view>
			<view class="icon-item">
				<icon type="search" />
				<text>search</text>
			</view>
			<view class="icon-item">
				<icon type="clear" />
				<text>clear</text>
			</view>
		</view>
		<view>
			<view style="display:flex; flex-direction: column;align-items: center;">
				<icon type="waiting" />
				<icon type="waiting" size="32" color="red" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	};
</script>

<style>
.icon-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
}
.icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 15px;
}
.icon-item text {
	margin-top: 5px;
}
</style>